<template>
  <Main>
    <div class="depart-tree">
      <el-tabs
        tab-position="left"
        v-model="categoryId"
        style="height: 100%"
        @tab-click="handleNodeClick"
      >
        <el-tab-pane
          v-for="(item, index) in LeftTableData"
          :key="index"
          :label="item.type"
          :name="item.objectId"
          class="el-tabs__nav-scroll"
        ></el-tab-pane>
      </el-tabs>
    </div>
    <div class="right">
    <el-table
      :data="tableData"
      style="width: 100%"
      row-key="kid"
      default-expand-all
      :empty-text="emptyText"
      @sort-change="sortChange"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
     <el-table-column fixed prop="processInstanceId" label="流程实例ID"></el-table-column>
     <el-table-column fixed prop="id" label="任务ID"></el-table-column>
      <el-table-column fixed prop="name" label="名称"></el-table-column>
      <el-table-column fixed prop="processDefinitionName" label="实例名称"></el-table-column>
      <el-table-column fixed prop="startTime" label="开始时间" :formatter="formatDate">
      </el-table-column>
      <el-table-column fixed="right" label="操作">
         <template slot-scope="scope">
          <el-tooltip class="item itema" effect="dark" content="查看流程图" placement="top-start">
            <el-popover
              placement="left"
              trigger="click"
              style="padding-right:10px;padding-left:10px"
            >
              <img :src="lookImg(scope.row.processInstanceId)" />
              <el-button slot="reference" type="primary" size="small">
                <i class="el-icon-view"></i>
              </el-button>
            </el-popover>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" content="流程明细" placement="top-start">
            <el-button type="primary" size="small" @click="detail(scope.row.processInstanceId)">
              <i class="el-icon-s-unfold"></i>
            </el-button>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="任务办理">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="流程回退" placement="top-start">
            <el-button type="primary" size="small" @click="backService(scope.row.processInstanceId,scope.row.id)">
              <i class="el-icon-refresh-left"></i>
            </el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <page
      :page="formInline.current"
      :limit="formInline.size"
      :total="formInline.total"
      @change="changePage"
    ></page>
      <Add ref="Add" @refresh="fetch"></Add>
      <Edit ref="Edit" @refresh="fetch"></Edit>
      <Back ref="Back" @refresh="fetch"></Back>
      <Detail ref="Det" @refresh="fetch"></Detail>
    </div>
  </Main>
</template>

<script>
import Main from "@/components/basic-container/main";
import page from "@/components/basic-page/page";
import Back from "./back";
import { activeUrl } from "@/config/env";
import Detail from "./detail"
import Add from "./add";
import Edit from "./edit";

const urls = {
  list: activeUrl + "/queryHistoricInstance",
  imgPath : activeUrl + "/instance/getImg?processInstanceId=",
  leftList: activeUrl + "/category/category/list"
};
export default {
  methods: {
    sortChange(column, prop, order) {
      var order = {
        asc: column.order == "ascending",
        column: column.prop
      };
      var orders = [];
      orders.push(order);
      this.formInline.orders = orders;
      this.fetch();
    },
    changePage(val) {
      this.formInline.current = val;
      this.fetch();
    },
    detail(processInstanceId) {
      // 任务明细
      this.$refs.Det.show(processInstanceId)
    },
    fetch(categoryId) {
      axios.get(urls.leftList).then(res => {
        const data = res.data.result;
        this.LeftTableData = data;
        this.categoryId = categoryId ? categoryId : data[0].objectId;
        this.rightFetch();
      });
    },
    rightFetch() {
      this.formInline.category_id = this.categoryId;
      axios.get(urls.list, {params:this.formInline}).then(res => {
        console.log(res)
        const data = res.data.result;
        this.tableData = data.records; 
        this.emptyText = "暂无数据"
        this.formInline.current = data.current;
        this.formInline.size = data.size;
        this.formInline.total = data.total;
      });
    },
    formatDate(row, column){
      return new Date(+new Date(row.startTime) + 8 * 3600 * 1000)
        .toISOString()
        .replace(/T/g, " ")
        .replace(/\.[\d]{3}Z/, "");
    },
    lookImg(processInstanceId) {
      // 显示流程图
      return urls.imgPath + processInstanceId + '&' + new Date();
    },
    handleNodeClick(e) {
      // 分类点击
      this.categoryId = e.name;
      this.rightFetch();
    },
    backService(processInstanceId,id){
      this.$refs.Back.show(processInstanceId,id)
    }
  },
  mounted() {
    this.fetch();
  },
  data() {
    return {
      formInline: {
        current: 1, // 当前页
        size: 10, // 每页条数
        total: 0, // 总条数
        orders: [], // 排序
        sorter: {}
      },
      tableData: [],
      LeftTableData: [],
      categoryId: null,
      emptyText : "加载中..."
    };
  },
  components: {
    Add,
    Edit,
    Main,
    page,
    Detail,
    Back
  }
};
</script>
<style scoped>
.depart-tree {
  position: absolute;
  background: #fff;
  width: 10%;
  top: 50px;
  left: 6px;
  bottom: 0px;
  overflow-y: scroll;
}
.right {
  background: #fff;
  width: 90%;
  position: absolute;
  right: 6px;
  height: 92%;
  overflow-y: auto;
}
.user-list {
  position: absolute;
  background: #fff;
  padding: 20px;
  top: 50px;
  left: 270px;
  right: 0;
  bottom: 0px;
}
.middle {
  position: absolute;
  z-index: 88;
  top: 40px;
  left: 250px;
  width: 30px;
  height: 100%;
  background: #f0f2f5;
}
/deep/ .el-tabs__nav-scroll {
  width: 115px !important;
  padding-top: 20px;
}
/deep/ .itema {
  margin-left: 10px;
}
/deep/ .el-tabs--left .el-tabs__nav-wrap.is-left::after,
.el-tabs--left .el-tabs__nav-wrap.is-right::after,
.el-tabs--right .el-tabs__nav-wrap.is-left::after,
.el-tabs--right .el-tabs__nav-wrap.is-right::after {
  top: 25px;
}
</style>